<template>
 <div class='test-model'>
   <input type="button" @click="isShowModel = !isShowModel" :value="btnValue">
   <Model @close-model="val => {isShowModel = val}" :showModel="isShowModel">
     <div slot="header">
       111
     </div>
     我是正文
     <div slot="footer">
       222
     </div>
   </Model>
 </div>
</template>

<script>
import Model from '@/compoents/Model/Model'
export default {
  components: {
    Model
  },
  data () {
    return {
      isShowModel: false
    }
  },
  computed: {
    btnValue () {
      return this.isShowModel
        ? '隐藏'
        : '显示'
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.test-model {
  width: 400px;
  height: 400px;
}
</style>
